<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class的简介</title>
</head>
<body>
    <h1>Class的简介</h1>
    <h2>ES6提供了更接近传统语言的写法，引入了Class（类）这个概念</h2>

    <script>
        // ES5的构造函数写法
        function Point(x, y) {
            this.x = x;
            this.y = y;
        }

        Point.prototype.toString = function() {
            return '(' + this.x + ', ' + this.y + ')';
        };

        // ES6的class写法
        class PointClass {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }

            toString() {
                return `(${this.x}, ${this.y})`;
            }
        }

        // 类的数据类型就是函数
        console.log(typeof PointClass); // "function"
        console.log(PointClass === PointClass.prototype.constructor); // true

        // 类的实例
        const p1 = new PointClass(2, 3);
        const p2 = new Point(2, 3);

        console.log(p1.toString()); // "(2, 3)"
        console.log(p2.toString()); // "(2, 3)"

        // 类不存在变量提升
        // new Foo(); // ReferenceError
        class Foo {}

        // 类的表达式形式
        const MyClass = class Me {
            getClassName() {
                return Me.name;
            }
        };

        // 立即执行的类
        let person = new class {
            constructor(name) {
                this.name = name;
            }

            sayName() {
                console.log(this.name);
            }
        }('张三');

        person.sayName(); // "张三"
    </script>
</body>
</html> 